<!-- 转账汇款详情 -->
<template>
	<div style="padding:40px;">
		<el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/trasferAudit' }">转账汇款审核</el-breadcrumb-item>
			<el-breadcrumb-item>{{pageType=='look'?'查看':'审核'}}</el-breadcrumb-item>
		</el-breadcrumb>

		<h3 style="margin-bottom: 0">跟投人信息</h3>
		<div class="grid">
			<p class="gridcell">姓名:  {{userInfo.staffName}}</p>
			<p class="gridcell">工号:  {{userInfo.staffCode}}</p>
			<p class="gridcell">业务线: {{userInfo.businessLineName}}</p>
			<p class="gridcell">部门: {{userInfo.departmentName}}</p>
			<p class="gridcell">职位:  {{userInfo.roleName}}</p>
		</div>

		<h3 style="margin-bottom: 0">跟投项目信息</h3>
		<div class="grid">
			<p class="gridcell">项目名称：{{detail.projectName}}</p>
			<p class="gridcell">所属城市：{{detail.cityName}}</p>
			<p class="gridcell">跟投总额：{{initCash(detail.investTotalMoney)}}</p>
			<p class="gridcell">申购时限：{{detail.applyBeginTime}}~{{detail.applyEndTime}}</p>
		</div>

		<h3 style="margin-bottom: 0">打款账号信息</h3>
		<div class="grid">
			<p class="gridcell">开户名称：{{detail.accountName}}</p>
			<p class="gridcell">开户行：{{detail.openingBank}}</p>
			<p class="gridcell">所属省市：{{detail.openingBankProvince}}</p>
			<p class="gridcell">银行账号：{{detail.bankAccount}}</p>
			<p class="gridcell">联行号：{{detail.bankNumber}}</p>
		</div>

		<h3 style="margin-bottom: 0">跟投费用信息</h3>
		<div class="grid">
			<p class="gridcell">业务类型：{{detail.businesType}}</p>
			<p class="gridcell">应付金额：{{initCash(detail.orderSunAmount)}}</p>
			<p class="gridcell">实付金额：{{initCash(detail.alreadyAmount)}}</p>
			<p class="gridcell">待付金额：{{initCash(detail.toBePaidAmount)}}</p>
			<p class="gridcell">创建时间：{{detail.createTime}}</p>
			<p class="gridcell">审核状态：{{detail.examineState}}</p>
		</div>
		<h3 style="border-top: 1px solid #ccc;padding-top: 20px;margin-bottom: 0">转账汇款信息</h3>
		<div class="twrapper">
			<table class="ztable">
				<tr>
					<td class="col">银行卡号</td>
					<td>{{detail.hkBankNumber}}</td>
					<td class="col">开户行</td>
					<td>{{detail.hkBankName}}</td>
					<td class="col">汇款日期</td>
					<td>{{detail.payTime}} </td>
				</tr>
				<tr>
					<td class="col">汇款金额（元）</td>
					<td>{{initCash(detail.hkMoney)}}</td>
					<td class="col">提交人</td>
					<td>{{userInfo.staffName}} </td>
					<td class="col">提交时间</td>
					<td>{{detail.hkCreateTime}}</td>
				</tr>
			</table>
		</div>
		<p>支付凭证</p>
		<p class="imgwrapper"><img :src="detail.payImagerUrl" alt="" @click="clickImg($event)"></p>

		<div v-if="pageType=='audit'">
			<p>上传收款凭证：</p>
			<p style="width: 500px">
				<upLoadImg @uploadSuccess="uploadSuccess"  v-model="url"></upLoadImg>
				<p>支持上传JPG、PNG、JPEG格式的图片。最大支持5M</p>
			</p>
			<div class="flexwrapper">
				<p>审核意见:&nbsp;&nbsp;</p>
				<p style="width: 700px;height: 200px"><el-input type="textarea"  :rows="4" v-model.trim="opinions" maxlength="100"></el-input></p>
			</div>
			<div style="text-align: center">
				<el-button type="primary" @click="audithander('y')">审核通过</el-button>
				<el-button type="primary" @click="audithander('n')">审核不通过</el-button>
			</div>

		</div>
		<!-- 预览图片 -->
		<PreviewImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></PreviewImg>
		<div v-if="pageType == 'look'">
			<p>上传收款凭证：</p>
			<p class="imgwrapper">
				<img :src="detail.collectImageUrl" alt="" @click="clickImg($event)">
			</p>
			<el-table :data="logInfo" border style="width: 70%">
			    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			    <el-table-column label="操作" prop="operationInfo" align="center"></el-table-column>
			    <el-table-column label="操作人" prop="operationUsername"  align="center"></el-table-column>
			    <el-table-column label="角色" prop="roleName" align="center"></el-table-column>
			    <el-table-column label="时间" prop="createDate" align="center">
			    	<template slot-scope="scope">
			    		{{scope.row.createDate}}
			    	</template>
			    </el-table-column>
			    <el-table-column label="备注" prop="remark" align="center"></el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
 	import PreviewImg from '@/components/common/PreviewImg'
	import api from '@/api/apiPath'
	import upLoadImg from '@/components/common/uploadImg'
	export default {
		components: {upLoadImg,PreviewImg},
	    data() {
	        return {
	        	pageType:undefined,
	        	tableData:[],
	        	id:undefined,
	        	state:undefined,// 0审核通过、1审核不通过
	        	opinions:'',//审核意见

	        	userInfo:{},//用户信息
	        	detail:{},//转账汇款信息
	        	logInfo:[],//登录信息
	        	url:undefined,

	        	showImg: false,
	        	imgSrc:'',
	        }
	    },
	    created () {
	    	this.pageType = this.$route.query.pageType;
	    	this.id = this.$route.query.id
	    },
	    mounted(){
	    	this.getinfo() 
	    },
	    methods: {
	    	clickImg(e) {
	    	  this.showImg = true
	    	  // 获取当前图片地址
	    	  this.imgSrc = e.currentTarget.src
	    	},
	    	viewImg() {
	    	  this.showImg = false
	    	},
	    	initCash(cellValue){
	    		if (!cellValue && cellValue !==0) return
	    	    if(cellValue !== 0){
	    	        return cellValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");
	    	    }
	    	    if(cellValue == 0){
	    	        return "0.00"
	    	    }
	    	},
	    	getinfo(){
				this.axios.get(api.EXAMINEDETAIL+this.id).then((res)=>{
					if (res.data.code == 200) {
						this.userInfo =res.data.data.userInfo
						this.detail = res.data.data.detail
						this.logInfo = res.data.data.logInfo
						this.url = this.detail.collectImageUrl
					}
				})
	    	},
	    	uploadSuccess(res){
	    	    this.url=res
	    	},
	    	audithander(type){
	    		let state//状态 0审核通过、1审核不通过
	    		if (type == 'y')
	    			state = 0
	    		else 
	    			state = 1
	    		
	    		if (this.opinions == '') {
	    			this.$message({
	    			      showClose: true,
	    			      message: '请填写审核意见',
	    			      type: 'warning'
	    			});
	    			return
	    		}
				this.axios.post(api.EXAMINECOMMIT,{id:this.id,state:state,opinions:this.opinions,collectImageUrl:this.url}).then((res)=>{
					if (res.data.code == 200) {
							this.$message({
							      showClose: true,
							      message: res.data.msg,
							      type: 'success'
							});
						this.$router.push({path: '/trasferAudit'})
					}
				})
	    	}
	    }

	}

</script>
<style lang="stylus">
	.grid
		display:flex
		flex-wrap: wrap

	.gridcell
		flex: 0 0 33%
		
	.twrapper 
		margin: 20px 0
		
	.twrapper .ztable 
		border-collapse: collapse
	
	.twrapper .ztable td,  .twrapper .ztable th
		border: 1px solid #ccc 
		 
	.twrapper .ztable td, .twrapper .ztable th
		width: 200px
		height: 40px
		text-align: center
	
	.twrapper .col
		background-color: rgba(7,17,27,0.1)
		
	.imgwrapper
		width: 150px

	.imgwrapper >img
		width: 100%
	.flexwrapper
		display: flex


	
</style>